<template>
    <div class="page" data-page="studyDetail">
        <div class="link-page-nav">
            <a href="#" class="link back" @click="$root.backToTab">
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-top" style="padding-bottom: 17px;">
            <div id="study_{{getNewId}}" class="link-page-title">xxx标题</div>
        </div>
        <div class="page-content">
            <div id="study_title_{{getNewId}}" class="small-title">某某某 | 2019-03-13 09:08</div>
            <div class="study-detail-content-content">本篇文章建议学习时长为
                <span id="study_suggest_{{getNewId}}">XX小时XX分钟</span></br>您已累计学习
                <span id="read_time_{{getNewId}}" style="color: #397FCF;">11小时11分钟11秒</span>。
            </div>
            <div class="study-video" id="study-video_{{getNewId}}" style="background: dimgray;height:300px;">
                <video src="" controls="controls" style="width:100%; height: 100%;" id="study_video_{{getNewId}}">
                </video>
            </div>
            <div id="study_content_{{getNewId}}" class="study-detail-content">
            </div>
            <div class="study-detail-content-tags" id="study_tags_{{getNewId}}">
                <!-- <div class="study-detail-tag">标签1</div>
                <div class="study-detail-tag">标签2</div>
                <div class="study-detail-tag">标签3</div> -->
            </div>
            <div class="study-detail-original" style="margin:80px 20px 30px 20px;">
                <a style="font-size:16px;color:#2471CA" id="study_orginal_{{getNewId}}">阅读原文</a>
                <div class="study-detail-visit-num">
                    <i class="iconfont icon-renshu"></i>
                    <span>访问人数</span><span id="study_num_{{getNewId}}" class="study-detail-num"
                        style="margin-left:10px">1234</span>
                </div>
            </div>
            <div class="study-detail-visit" style="background-color: #F1F1F1;">
                <div style="margin:0 20px">
                    <ul id="study_visit_list_{{getNewId}}">
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    return {
        mounted: function () {
            var self = this;
            self.studyId = this.$route.params.studyId;
        },
        data: function () {
            return {
                timeInterval: null,
                timeString: '11:10:11',
                getNewId: (new Date()).getTime(),
                pageName: "studyDetail",
                studyId: 0,
                startTime: moment().format("YYYY-MM-DD HH:mm:ss"),
                endTime: null,
                videoStart:false
            }
        },
        methods: {
            backToRefresh:function(){
                let self = this;
                jQuery("#study_video_"+self.getNewId).show();//点击阅读原文清除视频
            },
            selectEmergencyPlanDetail: function (planId) {
                var self = this;
            },
            calcTime: function () {
                var self = this;
                // self.timeString = moment(self.timeString, 'HH:mm:ss').add(1, 's').format('HH:mm:ss');
                // jQuery("#read_time_" + self.getNewId).html(moment(self.timeString, 'HH:mm:ss').format('HH小时mm分钟ss秒'));
            },
            //进入后台或返回前台 0:回到app 1:进入后台
            stopOrStartCalcTime: function (flag) {
                var self = this;
                if (flag == 1) {
                    self.uploadLearningTime();
                    self.timeInterval && clearInterval(self.timeInterval)
                    self.timeInterval = null
                    return;
                }
                if (!self.timeInterval) {
                    self.startTime = moment().format("YYYY-MM-DD HH:mm:ss");
                    self.timeInterval && clearInterval(self.timeInterval)
                    self.timeInterval = setInterval(function () {
                        self.calcTime()
                    }, 1000);
                }
            },
            //获取数据
            getData: function () {
                var self = this;
                Dao.getLearningMaterialsDetail({
                    id: self.studyId
                }, function (data, total) {
                    if (!data) {
                        return;
                    }
                    jQuery("#study_" + self.getNewId).html(data.title);
                    jQuery("#study_title_" + self.getNewId).html(data.author + " | " + data.createTime);
                    jQuery("#study_suggest_" + self.getNewId).html(data.learningTime + "分钟");
                    jQuery("#read_time_" + self.getNewId).html(data.userLearningTimeStr);
                    jQuery("#study_content_" + self.getNewId).html(data.text);
                    var imgArr=[]
                     data.text.replace(/src="([^"]+)"/g,(a,b)=>{
                        imgArr.push(b)
                     })
                    jQuery(`#study_content_${self.getNewId} img`).on('click',function(){
                    openAndShowBigImage(imgArr,imgArr.indexOf(jQuery(this).attr('src')))
                    })
                    jQuery("#study_video_"+self.getNewId).hide();
                    jQuery(".study-video").hide();
                    if(data.videoUrl){
                        jQuery("#study_video_" + self.getNewId).attr("src",data.videoUrl);
                        jQuery("#study_video_"+self.getNewId).show();
                        jQuery(".study-video").show();
                    }
                    if(data.originalLink){
                        jQuery("#study_orginal_" + self.getNewId).off().on('click',function(){
                            jQuery("#study_video_"+self.getNewId).hide();//点击阅读原文清除视频
                            localStorage.setItem('studyDetailOriginal',data.originalLink);
                            app.router.navigate("/studyDetailOriginal/")
                        })
                    }else{
                        jQuery("#study_orginal_" + self.getNewId).hide();
                        localStorage.setItem('studyDetailOriginal','');
                    }
                    // jQuery("#study_orginal_" + self.getNewId).attr('href', '/studyDetailOriginal/'+data.originalLink+"/");
                    var labels = data.label.split(',');
                    for (var i in labels) {
                        jQuery("#study_tags_" + self.getNewId).append(`<div class="study-detail-tag">` + labels[i] + `</div>`);
                    }
                })
            },
            //人数
            getPeople: function () {
                var self = this;
                Dao.selectLearningTimeByAccount({
                    queryType: 0,
                    pageIndex: 0,
                    pageSize: 0,
                    learningMaterialsId: self.studyId
                }, function (data, total) {
                    jQuery("#study_num_" + self.getNewId).html(total);
                    var defaulticon = 'img/mine/defaulticon.png';
                    for (var d in data) {
                        var m = data[d];
                        var html = `
                            <li>
                                <a class="link" href="#">
                                    <img src="`+ (m.headUrl || defaulticon) + `" class="myicon">
                                    <div style="color: #000000;margin-left: 5px;">`+ m.accountName + `</div>
                                    <div class="study-detail-visit-time">累计学习`+ common.formatDuring(m.sumLearningTime) + `</div>
                                </a>
                            </li>
                        `;
                        jQuery("#study_visit_list_" + self.getNewId).append(html);
                    }
                });
            },
            //上传时间
            uploadLearningTime: function () {
                var self = this;
                self.endTime = moment().format("YYYY-MM-DD HH:mm:ss");
                var time = {
                    materialsId: self.studyId,
                    learningAccount: userInfor.accountName,
                    learningStartTime: self.startTime,
                    learningEndTime: self.endTime,
                    orgId: userInfor.org.id
                }
                Dao.saveLearningTime({
                    timeList: JSON.stringify([time])
                }, function (data) {
                });
            },
        },
        on: {
            pageInit: function (e, page) {
                var self = this;
                // self.timeInterval = setInterval(function () {
                //     self.calcTime()
                // }, 1000);
                self.getData();
                self.getPeople();
                jQuery("#study_video_"+self.getNewId).off().on('click',function(){
                });
            },
            pageBeforeOut: function (e, page) {
                var self = this;
                self.uploadLearningTime();
                clearInterval(self.timeInterval)
            }
        },
    }
</script>

<style scoped>
    #planmember .row {
        width: 100%;
        font-size: 14px;
        padding-left: 16px;
        padding-right: 16px;
        margin-bottom: 5px;
    }
    .study-detail-content {
        padding: 5px 0px;
        margin:10px 20px;
        font-size: 14px;
        opacity: 0.8;
        color: #000000;
        line-height: 24px;
    }

    .study-detail-content-content {
        margin-top: 5px;
        font-size: 14px;
        padding: 10px 15px;
        margin: 0 20px;
        background-color: #F1F1F1;
        color: #666666;
    }

    .gropList {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .emergencyPlan-row {
        color: #333 !important;
        width: 100%;
        font-size: 14px;
        padding-left: 16px;
        padding-right: 16px;
        margin-bottom: 5px;
    }

    .myicon {
        border-radius: 40px;
        width: 40px;
        height: 40px;
    }

    .small-title {
        padding: 0 20px;
        color: #999999;
        margin-bottom: 30px;
    }

    .study-detail-content-tags {
        display: flex;
        flex-wrap: wrap;
        margin: 10px 20px 30px 20px;
    }

    .study-detail-tag {
        background-color: #F1F1F1;
        margin: 8px 8px;
        height: 30px;
        padding: 10px 15px;
        line-height: 30px;
        color: #000000;
        text-align: center;
    }

    .study-detail-visit-num {
        display: inline-block;
        float: right;
        opacity: 0.5;
    }

    .study-detail-visit .link {
        margin: 5px 0;
        height: 40px;
        justify-content: normal;
        width: 100%;
        position: relative;
        margin-top: 16px;
    }

    .study-detail-visit-time {
        position: absolute;
        right: 0px;
        opacity: 0.7;
        color: #000000
    }

    .study-detail-visit {
        background-color: #F1F1F1;
        min-height: 200px;
        margin-bottom: 50px;
        padding-bottom:50px;
    }

    .study-video {
        width: 88%;
        margin: 20px 20px;
        display: none;
    }
    .study-popup-tags{
        margin: 20px 0px;
    }
</style>